<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Box2DWeb</title>
        <style>
        body {
            background-color: #f0f0f0;
        }

        div.box2d-canvas-container {
            background-repeat: repeat-x;
            background-position: left top;
            background-image: url();
            border-style: solid;
            border-width: 2px;
            border-color: black;
            background-color: white;
        }

        .size640x480 {
            width: 640px;
            height: 480px;
        }
        nav {
            background-color: white ;
            color : white;
        }
        </style>

        <script type="text/javascript" src="../lib/Box2dWeb-2.1a.2.js"></script>
        <script type="text/javascript" src="js/lang.js"></script>
        <script type="text/javascript" src="js/progress.js"></script>
        <script type="text/javascript" src="js/canvas.js"></script>
        <script type="text/javascript" src="js/renderers.js"></script>
        <script type="text/javascript" src="js/actors.js"></script>
        <script type="text/javascript" src="js/object-factory.js"></script>
        <script type="text/javascript" src="js/box2d-world.js"></script>
    </head>
    <body>
        <h1>Box2DWeb</h1>
        <p>
            Using the
            <a href="http://code.google.com/p/box2dweb/">JavaScript port</a>
            of the flash port of the
            <a href="http://box2d.org/">Box2D library</a>
        <p>
            Lean with left-right arrow. Reset by Enter.
        <nav>
            <a href="js/lang.js">lang.js</a>
            <a href="js/progress.js">progress.js</a>
            <a href="js/canvas.js">canvas.js</a>
            <a href="js/renderers.js">renderers.js</a>
            <a href="js/actors.js">actors.js</a>
            <a href="js/object-factory.js">object-factory.js</a>
            <a href="js/box2d-world.js">box2d-world.js</a>
        </nav>
        <div class="box2d-canvas-container size640x480">
            <canvas id="canvas" width="640" height="480"></canvas>
        </div>
        <table>
            <thead>
                <tr>
                    <th>Dynamic bodies
                    <th>Camera
            <tbody>
                <tr>
                    <td>
                        <button onclick="SK8RGameWorld.reset();">Reset</button>
                    <td>
                        <div>
                            <label><input type="checkbox" onclick="SK8RGameWorld.toggleFollow()">Follow sk8board</label>
                        </div>
                        <table>
                            <tbody>
                                <tr>
                                    <td>
                                    <td>
                                        <button onclick="SK8RCanvas.pan(0,-1);">Pan</button>
                                    <td>
                                <tr>
                                    <td>
                                        <button onclick="SK8RCanvas.pan(-1,0);">Pan</button>
                                    <td>
                                        <button onclick="SK8RCanvas.resetCamera();">Default</button>
                                    <td>
                                        <button onclick="SK8RCanvas.pan(1,0);">Pan</button>
                                <tr>
                                    <td>
                                    <td>
                                        <button onclick="SK8RCanvas.pan(0,1);">Pan</button>
                                    <td>
                            </tbody>
                        </table>
            </tbody>
        </table>
    </body>
</html>